<template>
  <div class="iu-el-tab" ref="scroll">
    <div class="scroll-content" @click="eventTabClick($event.target)">
      <div
        class="iu-el-tab-item"
        :class="{ selected: selected === dti }"
        v-for="(dto, dti) in tabs"
        :data-index="dti"
        :key="dti"
      >
        {{ dto.name || dto }}
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";

export default {
  name: "iu-tab",
  data() {
    return {
      scroll: null
    };
  },
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    selected: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.scroll, {
      click: true,
      scrollX: true,
      probeType: 0
    });
  },
  methods: {
    eventTabClick(element) {
      let index = element.getAttribute("data-index");
      this.scroll.scrollToElement(element, 300, true, 0);
      if (index != null) {
        this.$emit("change", +index);
      }
    }
  }
};
</script>
<style lang="less">
.iu-el-tab {
  width: 95vw;
  // background-color: #1f2037;
  // margin-top: 16px;
  // padding-top: 8px;
  padding-left: 8px;
  box-sizing: border-box;

  white-space: nowrap;
  overflow: hidden;

  .scroll-content {
    display: inline-block;
  }
  // display: flex;
  .iu-el-tab-item {
    padding: 0 20px;
    height: 32px;
    box-sizing: border-box;
    line-height: 32px;
    display: inline-block;
    list-style: none;
    font-size: 14px; 
    color: #fff;
    background: #191a2f;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    &.selected {
      background: #456de6;
    }
  }
}
</style>
